<template>
  <div>
    <button @click="showCreateJob">创建Job</button>
    <job-list v-if="!showCreate && !showTask" :env-id="envId" @show-task="showTaskList" />
    <create-job v-if="showCreate" :env-id="envId" @back="hideCreateJob" />
    <task-list v-if="showTask" :job-id="selectedJobId" @back="hideTaskList" />
  </div>
</template>

<script>
import JobList from './JobList.vue';
import CreateJob from './CreateJob.vue';
import TaskList from './TaskList.vue';

export default {
  props: ['envId'],
  components: { JobList, CreateJob, TaskList },
  data() {
    return {
      showCreate: false,
      showTask: false,
      selectedJobId: '',
    };
  },
  methods: {
    showCreateJob() {
      this.showCreate = true;
    },
    hideCreateJob() {
      this.showCreate = false;
    },
    showTaskList(jobId) {
      this.selectedJobId = jobId;
      this.showTask = true;
    },
    hideTaskList() {
      this.showTask = false;
    },
  },
};
</script>

<style scoped>
button {
  margin-bottom: 10px;
}
</style>
